<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
				width: 100px;
				height: 50px;
				background: black;
				text-align: center;
				line-height: 50px;
				color: #ffffff;
				margin: 0 auto;
				position: relative;
			}
			P:after{
				content: "";
				display: block;
				position: absolute;
				right: -20px;
				top: 0px;
				border-width:26px 10px ;
				border-style: solid;
				/*background: rgba(0,0,0,0);*/
				border-color: #6bd6ff transparent transparent #6bd6ff;
				/*background: red;*/
			}
			.d1{
				background: url(imgone/images/ss1_03.jpg);
				width: 751px;
				height: 458px;
			}
			.d1>img{
				display: none;
			}
			.d1:hover>img{
				display: block;
			}
			.d0{
				position: relative;
			}
			.d2{
				margin-left:500px 
			}
			h3{
				margin-left: 10px;
			}
			.d2{
				position: relative;
			}
			.d2:after{
				content: "";
				display: block;
				width: 100px;
				height: 1px;
				position: absolute;
				left: -100px;
				top: 20px;
				background: red;
			}
			.d2:before{
				content: "";
				display: block;
				width: 100px;
				height: 1px;
				position: absolute;
				left: 100px;
				top: 20px;
				background: red;
			}
			.d3{
				width: 1px;
				height: 50px;
				background: red;
				position: absolute;
				left: 400px;
				top: 20px;
			}
			.d4{
				width: 1px;
				height: 50px;
				background: red;
				position: absolute;
				left: 700px;
				top: 20px;
			}
			.d5{
				width: 301px;
				height: 1px;
				background: red;
				position: absolute;
				left: 400px;
				top: 70px;
			}
		</style>
	</head>
	<body>
		<!--
			浮动的元素就是块级元素
		-->
		<p>666</p>
		<div class="d1">
			<img src="imgone/images/s3_10.jpg"/>
		</div>
		<div class="d0">
			<div class="d2">
			<h3>关于我们</h3>
			<h4>ABOUT US</h4>
		</div>
		<div class="d3"></div>
		<div class="d4"></div>
		<div class="d5"></div>
		</div>
	</body>
</html>
